$(function () {


    var layer = layui.layer
    var form = layui.form
    var laypage = layui.laypage







    var obj = { page: 1, limit: 10 }

    advimg()
    function advimg() {
        $.ajax({
            method: 'GET',
            url: '/ydd_advimg/list',
            data: obj,
            success: function (res) {
                if (res.errno !== 0) {
                    return layer.msg('获取广告管理失败')
                }
                // console.log(res);
                // 使用模板引擎渲染页面的数据
                var htmlStr = template('tpl-table', res.data)
                // console.log(htmlStr);
                $('tbody').html(htmlStr)

                renderPage(res.data.count)

            }
        })
    }







    // 广告图文位置 下拉选择框
    initCate()
    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/ydd_advpos/list',
            success: function (res) {
                // console.log(res);
                if (res.errno !== 0) {
                    return layer.msg('获取分类数据失败')
                }
                // 调用模板引擎渲染分类的可选项
                var htmlStr = template('tpl-cate', res.data)
                // console.log(htmlStr);
                $('.selects').html(htmlStr)
                // 通过 layui 重新渲染表单区域的UI结构
                form.render()
            }

        })
    }


    // 为筛选表单绑定 submit 事件
    $('#form-search').on('submit', function (e) {
        e.preventDefault()
        // 获取表单中选中项的值
        var title = $('[name=title]').val()
        var hhaa = $('[name=hhaa]').val()
        // 为查询参数对象 q 中对应的属性赋值
        obj.advimgdesc = title
        obj.advimgpos = hhaa
        // 根据最新的筛选条件，重新渲染表格的数据
        advimg()

    })











    // 渲染分页
    function renderPage(total) {
        // console.log(total);
        // 使用laypage.render()来渲染分页
        laypage.render({
            elem: 'pageBox',//分页容器的id
            count: total,//总数据的个数
            limit: obj.limit,//一页显示几条数据
            curr: obj.page,//默认显示的页码
            //定义每页条数的选择项
            limits: [10, 20, 30, 40],
            // 定义分页器中的组件
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 分页切换时会触发,render方法被调用也会触发jump
            // 里面有一个布尔值得参数first,如果是自动加载触发则是true
            // 如果是点击分页器触发则是undefined,
            jump: function (page, first) {
                // console.log(page.curr);
                obj.page = page.curr
                // 赋值完成后需要再次调用initTable()方法
                //直接调用会造成程序的死循环,因为initTable()中调用了renderPage()方法
                // 当一条显示的最新的数据重新赋值给obj.pagesize
                obj.limit = page.limit
                if (!first) {
                    // 通过点击分页器,则对文章列表进行重新渲染
                    advimg()
                }
            }
        })

    }









    // 通过代理的形式，为删除按钮绑定点击事件处理函数
    $('tbody').on('click', '.btn-delete', function () {
        // console.log(1);
        // 获取删除按钮的个数
        var len = $('.btn-delete').length
        // console.log(len)
        // 获取到文章的 id
        var id = $(this).attr('data-id')
        // console.log(id);
        // 询问用户是否要删除数据
        layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/ydd_advimg/del',
                data: {
                    id
                },
                success: function (res) {
                    if (res.errno !== 0) {
                        return layer.msg('删除文章失败！')
                    }
                    layer.msg('删除文章成功！')

                    // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
                    // 如果没有剩余的数据了,则让页码值 -1 之后,
                    // 再重新调用 initTable 方法
                    // 4
                    if (len === 1) {
                        // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
                        // 页码值最小必须是 1
                        obj.pagenum = obj.pagenum === 1 ? 1 : obj.pagenum - 1
                    }
                    advimg()
                    layer.close(index);
                }

            })


        });
    })






    // 编辑
    $('.btntijiao1').on('click', function () {
        $('#file1').click()
        $('.shade').show()
    })
    $('.iconclose').on('click', function () {
        $('.article1').hide()
        $('.shade1').hide()
    })

    $('tbody').on('click', '.btn-edit', function () {
        var id = {
            id: $(this).attr('data-id')
        }
        console.log(id);
        $('.article1').on('submit', '#form_add1', function (e) {
            let data = {
                advimgpos: $('#form_add1 [name=advimgpos]').val(),
                advimgdesc: $('#form_add1 [name=advimgdesc]').val(),
                advimglink: $('#form_add1 [name=advimglink]').val(),
                advimgsrc: $('#form_add1 [name=advimgsrc]').val(),
            }
            console.log(data);
            // console.log($(this).serialize());
            e.preventDefault()
            $.ajax({
                method: 'POST',
                url: '/ydd_advimg/update',
                data: {
                    ...id, ...data
                },
                success: function (res) {
                    console.log(res);
                    if (res.errno !== 0) {
                        return layer.msg('更新分类数据失败')
                    }
                    layer.msg('更新分类数据成功')
                    layer.close(indexEdit)



                }



            })

            $('.article1').hide()
            $('.shade1').hide()
            advimg()

        })
        // console.log('ok');
        $('.article1').show()
        $('.shade1').show()

    })

    $('.btnqixiao').on('click', function () {
        $('.article1').hide()
        $('.shade1').hide()
    })




    // var indexEdit = null
    // // 通过事件委托的方式 为.btn - edit 编辑按钮添加点击事件
    // $('tbody').on('click', '.btn-edit', function (e) {
    //     e.preventDefault()
    //     // console.log(data);
    //     // 弹出一个修改文章分类信息的层
    //     indexEdit = layer.open({
    //         type: 1,
    //         title: '',
    //         content: $('.article1').html(),
    //         area: ['700px', '450px']
    //     })
    //     // 通过自定义方式 获取id
    //     var id = $(this).attr('data-id')
    //     // var advimgdesc = $(this).attr('data-advimgdesc')
    //     // console.log(advimgdesc);
    //     console.log(id);
    //     // initCate()
    //     let data = {
    //         advimgpos: $('form_add1 [name=advimgpos]').val(),
    //         advimgdesc: $('form_add1 [name=advimgdesc]').val(),
    //         advimglink: $('form_add1 [name=advimglink]').val(),
    //         advimgsrc: $('form_add1 [name=advimgsrc]').val(),
    //     }
    //     // var html1 = $(this).parent().siblings('#desc').text();
    //     // console.log(html1);

    //     //发起请求获取对应的数据
    //     $.ajax({
    //         method: 'GET',
    //         url: '/ydd_advimg/rowInfo',
    //         data: {
    //             ...id,
    //             ...data
    //         },
    //         success: function (res) {
    //             console.log(res);
    //             form.val('form_add1', res.data)
    //             // $('#ta').html(html1)
    //         }

    //     })


    //     $('.btntijiao1').on('click', function () {
    //         $('#file1').click()
    //         $('.shade').show()
    //     })
    //     $('.iconclose').on('click', function () {
    //         $('.article1').hide()
    //         $('.shade1').hide()
    //     })





    // })



    // // 通过事件委托的方式 为编辑的表单添加 submit 事件
    // $('body').on('submit', '#form-add1', function (e) {
    //     e.preventDefault()
    //     $.ajax({
    //         method: 'POST',
    //         url: '/ydd_advimg/update',
    //         data: $(this).serialize(),
    //         success: function (res) {
    //             console.log(res);
    //             if (res.errno !== 0) {
    //                 return layer.msg('更新分类数据失败')
    //             }
    //             layer.msg('更新分类数据成功')
    //             layer.close(indexEdit)
    //             advimg()
    //         }
    //     })
    // })









    // 监听图片上传事件
    // 监听表单
    $('.article').on('submit', '#form_add', function (e) {
        // console.log($(this).serialize());
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/ydd_advimg/add',
            data: $(this).serialize(),

            success: function (res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg('新增失败')
                }
                layer.msg('新增成功')
                $('.article').hide()
                $('.shade').hide()
                $('#form_add [name=advimgdesc]').val('')
                $('#form_add [name=advimglink]').val('')

                advimg()
            }
        })
    })

    $('.btntijiao').on('click', function () {
        $('#file').click()
        $('.shade').show()
    })

    $('.iconclose').on('click', function () {
        $('.article').hide()
        $('.shade').hide()
    })
    $('#addedbtn').on('click', function () {
        // console.log('ok');
        $('.article').show()
        $('.shade').show()

        var file = null
        // 获取文件在服务器的地址
        var img = null
        $('body').on('change', '#file1', function (e) {
            console.log(1);
            var fileList = e.target.files
            console.log(fileList);

            if (fileList.length === 0) {
                return file = null
            }
            // 根据文件，创建对应的 URL 地址
            var newImgURL = URL.createObjectURL(fileList[0])

            $('#image').attr('src', newImgURL)
            file = fileList[0]

            var fd = new FormData()
            fd.append('file', file)
            // 发送请求将图片上传到服务器
            $.ajax({
                method: 'POST',
                url: '/common/upload?type=images',
                data: fd,
                contentType: false,
                processData: false,
                success: function (res) {
                    if (res.errno !== 0) return layui.layer.msg('上传图片失败!');
                    setTimeout(function () {
                        layui.layer.msg('图片上传成功!');
                        img = res.data.savePath
                    }, 3000)
                }
            })
            // console.log(icon);
        })



    })

    $('.btnqixiao').on('click', function () {
        $('.article').hide()
        $('.shade').hide()
    })








})